<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 管理系统大布局 - Layui</title>
    <link rel="stylesheet" href="/static/css/layui/css/layui.css">
    <style>
        #avatarFile {
            outline: 0;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .btn {
            color: #0000AA;
            text-decoration: none;
        }

        .green {
            color: green;
        }

        .red {
            color: tomato;
        }

        .gray {
            color: gray;
        }

        td {
            text-align: center;
        }

        .wen {
            font-size: 16px;
            outline: none;
            border: none;
            width: 100px;
            height: 30px;
            /* border-radius: 20px; */
            margin-bottom: 30px;
            color: white;
            background-color: skyblue;
            cursor: pointer;
        }

        .hui {
            text-decoration: none;
            color: white;
        }

        img {
            width: 100px;
            height: 50px;
        }

    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">七海博客后台管理</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>

                <li class="layui-nav-item layui-hide-xs"><a href="">控制台</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="">商品管理</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="">用户</a></li>
                <!-- <li class="layui-nav-item">
                    <a href="javascript:;">nav groups</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">menu 11</a></dd>
                        <dd><a href="">menu 22</a></dd>
                        <dd><a href="">menu 33</a></dd>
                    </dl>
                </li> -->
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                        <img src="{{userInfo.avatar}}" alt="" id="preview" class="layui-nav-img">
                        <!-- <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                            class="layui-nav-img"> -->
                        设置
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">个人信息</a></dd>
                        <dd><a href="">修改密码</a></dd>
                        <dd><a href="/logout" onclick="return confirm('是否退出')">退出</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">文章管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">menu 1</a></dd>
                            <dd><a href="javascript:;">menu 2</a></dd>
                            <dd><a href="javascript:;">menu 3</a></dd>
                            <dd><a href="">the links</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">分类管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">list 1</a></dd>
                            <dd><a href="javascript:;">list 2</a></dd>
                            <dd><a href="">超链接</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;">其他管理</a></li>
                    <!-- <li class="layui-nav-item"><a href="">the links</a></li> -->
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <button class="wen" id="addBtn">添加文章</button>
                <div class="photo">
                    <button id="updAvatar">更改头像</button>
                    <input type="file" id="avatarFile" style="display:none;">

                </div>
                <table width='1300px' ; text-align=center; rules='all' class="layui-table">
                    <tr>
                        <td>序号</td>
                        <td width="200px">标题</td>
                        <td>所属分类</td>
                        <td>图片</td>
                        <td>作者</td>
                        <td>内容</td>
                        <td>状态</td>
                        <td>添加时间</td>
                        <td>修改时间</td>
                        <td>操作</td>
                    </tr>
                    <!-- 0发布1未发布2审核中 -->
                    {{each articles item index}}
                    <tr>
                        <td>{{index + 1}}</td>
                        <td>{{item.title}}</td>
                        <td>{{item.cate_name}}</td>
                        <td><img src="/{{item.img}}" margin=" 0px auto" alt=""></td>
                        <td>{{item.author}}</td>
                        <td><a href="/detail?id={{item.id}}">查看详情</a></td>
                        <td>
                            <!-- {{if item.status == 0}}
                        <span class="green">已发布</span>
                        {{else if item.status ==1}}
                        <span class="red">未发布</span>
                        {{else}}
                        <span class="gray">审核中</span>
                        {{/if}} -->
                            {{@
                            item.status_text
                            }}
                        </td>
                        <td>{{item.add_time | dateFormat 'YYYY-MM-DD'}}</td>
                        <td>{{item.update_time | dateFormat 'YYYY-MM-DD'}}</td>
                        <td>
                            <a class="btn edit" href="/edit?id={{item.id}}" class="layui-btn  layui-btn-sm">编辑</a> |
                            <!-- <a class="btn" href="#" onclick="confirmDelete('{{item.id}}');">永久删除</a>| -->
                            <a href="javascript:;" class="btn" href="#"
                                onclick="ajaxDelete(this,'{{item.id}}','{{item.img}}')">删除</a>|
                            <a class="btn" href="/recycle?id={{item.id}}"
                                onclick="return confirm('确定加入回收站吗？');">加入回收站</a>
                        </td>
                    </tr>
                    {{/each}}
                </table>
            </div>
        </div>

        <!-- <div class="layui-footer"> -->
        <!-- 底部固定区域 -->
        <!-- 底部固定区域 -->
        <!-- </div> -->
    </div>
    <script src="/static/css/layui/layui.js"></script>
    <script src="/static/js/jquery.js"></script>
    <script src="/static/plugins/layer/layer.js"></script>
    <script>
        $("tr:even").css("background-color", 'skyblue');
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                }
                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });
        $("tr:even").css("background-color", 'skyblue');
        document.getElementById('addBtn').onclick = function () {
            location.href = '/add'
        }
        function confirmDelete(id, img) {

            let result = layer.confirm('你真的要永久删除它吗，数据不可恢复', {
                btn: ['yes', 'no'],
                shadeClose: true,
                //第一个透明度,第二个是背景颜色
                shade: [0.5, '#ccc']
            }, () => {
                //确认触发
                location.href = "/delete?id=" + id + "&img" + img;
            }, () => {
                //  layer.msg("编辑失败",{icon:2});
                layer.msg('取消删除')
            });


        }
        //ajax异步永久删除
        function ajaxDelete(ele, id, img) {
            layer.confirm('你真的要永久删除它吗，数据不可恢复', {
                btn: ['yes', 'no'],
                shadeClose: true,
                //第一个透明度,第二个是背景颜色
                shade: [0.5, '#ccc']
            }, () => {
                //确认触发
                // location.href = "/delete?id=" + id + "&img" + img;
                let xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState === 4 && this.status === 200) {
                        let data = JSON.parse(this.responseText);
                        let { code, message } = data;
                        if (code === 20000) {
                            // 删除成功,删除当前tr行
                            $(ele).parents('tr').remove()
                            setTimeout(function () {
                                layer.msg('删除成功', { icon: 1 })
                            }, 500)

                            layer.closeAll();
                        } else if (code === 30004) {
                            layer.msg(message)
                            location.href = "/login"
                        } else {
                            layer.msg('删除失败')
                        }
                    }
                }
                xhr.open('post', '/ajaxdelete', true)
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
                xhr.send("id=" + id + "&img=" + img + "&flag=ajax")

            }, () => {
                layer.msg('不是')
            });
        }


        let avatarFile = document.getElementById("avatarFile")
        let preview = document.getElementById('preview')
        document.getElementById("updAvatar").onclick = function () {
            avatarFile.click();
        }
        avatarFile.onchange = function () {
            let file = this.files[0];
            if (!file) {
                return;
            }
            let formData = new FormData();
            formData.append('avatar', file);

            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    let data = JSON.parse(this.responseText)
                    let { message, code, src } = data
                    layer.msg(message)
                    preview.src = '/' + src;
                }
            }
            xhr.open('post', '/uploadAvatar', true)
            xhr.send(formData)
        }


    </script>
</body>

</html>